<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 响应式页面的关键技术:视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin:0px;
            box-sizing: border-box;
        }

        body{
            padding:20px;
        }
       
       .header,.left,.center,.right{
           border:1px solid black;
           margin-top:5px;
           /* 文本水平居中 */
           text-align: center;
           /* 设置字体大小 */
           font-size:1em;
       }

       .left,.center,.right{
           height:300px;
           line-height: 300px;
       }

       .header{
           width:100%;
           height: 50px;
           /* 通过行高设置文本的垂直居中 */
           line-height: 50px;
       }
      /* 大于等于992的样式 */
       @media screen and (min-width: 992px) {
             .left,.center,.right{
                 float:left
             }

             .left{
                 width:30%;
             }
             .center{
                 width:60%
             }
             .right{
                 width:10%;
             }
       }
       /*768到992的样式*/
       @media screen and (min-width: 768px) and (max-width: 991px){
        .left,.center,.right{
                 float:left
             }

             .left{
                 width:40%;
             }
             .center{
                 width:60%;
             }
             .right{
                 width:100%;
             }
       }

       @media screen and (max-width: 767px) {
        .left,.center,.right{
                 float:left;
                 width:100%; 

             }
       }
    </style>
</head>
<body>
    <header class="header">header</header>
    <aside class="left"> left</aside>
    <section class="center"> center </section>
    <section class="right"> right </section>
</body>
</html>